<template>
  <div class="main_left column-flex">
    <!--  上  -->
    <div class="box module-top" @mouseover="mouseOver" @mouseleave="mouseLeave">
      <!-- 标题 -->
      <h1 class="left-title sp-flex">
        <span>高风险资产</span>
        <div>
          <el-button
            class="el-icon-arrow-left"
            @click="
              riskIndex == 0
                ? (riskIndex = highRiskArr.length / 4 - 1)
                : riskIndex--
            "
          ></el-button>
          <el-button
            class="el-icon-arrow-right"
            @click="
              riskIndex >= highRiskArr.length / 4 - 1
                ? (riskIndex = 0)
                : riskIndex++
            "
          ></el-button>
        </div>
      </h1>
      <div class="container">
        <RiskAssets
          :dataArr="highRiskArr.slice(riskIndex * 4, (riskIndex + 1) * 4)"
          @openDialog="openRiskDia"
        ></RiskAssets>
      </div>
    </div>
    <!--  中  -->
    <div class="box module-middle">
      <h1 class="left-title">防护/监管有效性</h1>
      <SuperVision :superObj="superObj"></SuperVision>
    </div>
    <!--  下  -->
    <div class="box module-bottom column-flex">
      <h1 class="left-title">重点关注事项</h1>

      <KeyIssues :thingArr="thingArr" @openDialog="openKeyDialog"></KeyIssues>
    </div>
    <!-- 高风险对话框 -->
    <searchDialog
      ref="riskDialogRef"
      :total="riskTotal"
      :searchFormObj="assetsFormObj"
      :tableList="assetsTableList"
      :tableData="riskTableData"
      :totalInfo="safeConcernsoTalInfo"
      :show-total-info="true"
      @getTableList="getRiskTableList"
      @operateEvent="operateRiskEvent"
      operateName="进入画像"
      :operateOpen="operateOpen"
    />
    <!--   网络安全重点关注项  -->
    <searchDialog
      ref="keyDialogRef"
      :total="keyTotal"
      :searchFormObj="imgFormObj"
      :tableList="imgTableList"
      :tableData="keyTableData"
      @getTableList="getTableList"
      @operateEvent="operateEvent"
    />
  </div>
</template>

<script>
import RiskAssets from "@/components/assets/riskAssets.vue";
import SuperVision from "@/components/assets/superVision.vue";
import KeyIssues from "@/components/assets/keyIssues.vue";
import {
  highRiskAsset,
  itemThings,
  protectionEffectiveness,
  assetsListPage,
  kpilList,
  getAssetsPageListHight,
  getAssetsHightCount,
} from "@/api/assetSituation";
import CycleComponent from "@/components/common/cycleComponent.vue";
import Obj from "./tableData/index";
import { cloneDeep } from "@/utils/loadash-es";
import SearchDialog from "@/components/common/searchDialog.vue";
export default {
  components: {
    RiskAssets,
    SuperVision,
    KeyIssues,
    CycleComponent,
    SearchDialog,
  },
  data() {
    return {
      // 是否显示进入画像
      operateOpen: false,
      // 高风险资产区域
      highRiskArr: [],
      riskTotal: 0,
      // 高风险序列数
      riskIndex: 0,
      // 重点关注事项
      thingArr: [],
      // 监管有效性对象
      superObj: {
        all: {
          ringRatio: "",
        },
        typeList: [],
      },
      queryParams: {
        searchType: this.$store.state.searchType || "3",
        current: 1,
        size: 10,
      },
      // 网络安全重点关注项对话框
      keyTableData: [{}],

      imgTableList: cloneDeep(Obj.importantTableList),
      //资产概览弹窗信息
      riskTableData: [{}],
      keyTotal: 0,
      assetsTableList: cloneDeep(Obj.assetsTableList),
      safeConcernsoTalInfo: [
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", value: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", value: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", value: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
      ],
      assetsArr: cloneDeep(Obj.assetsArr),
      timer: null,
      code:null
    };
  },
  computed: {
    // 网络安全重点关注
    imgFormObj: {
      get() {
        return {
          fieldList: cloneDeep(Obj.importantFormObj.fieldList),
          searchData: {},
          btnHidden: true,
          //  是否有额外的参数
          isNeedResetExtraParam: false,
          listTypeInfo: {
            levelCodeList: this.$store.state.levelCodeList,
            categoryCodeList: this.$store.state.categoryCodeList,
            typeCodeList: this.$store.state.typeCodeList,
            protectCodeList: this.$store.state.protectCodeList,
            disposalStatusList: [
              {
                label: "未处置 ",
                value: 0,
              },
              {
                label: "已处置 ",
                value: 1,
              },
              {
                label: "未处置 ",
                value: 2,
              },
            ],
          },
        };
      },
      set() {},
    },
    // 资产概览
    assetsFormObj: {
      get() {
        return {
          fieldList: cloneDeep(Obj.assetsFormObj.fieldList),
          searchData: {},
          btnHidden: true,
          //  是否有额外的参数
          isNeedResetExtraParam: false,
          listTypeInfo: {
            equipmentStatusList: this.$store.state.equipmentStatusList,
            useStatusList: this.$store.state.useStatusList,
            secLevelList: this.$store.state.secLevelList,
            equipmentTypeList: this.$store.state.equipmentTypeList,
          },
        };
      },
      set() {},
    },
  },
  methods: {
    getDatas(val) {
      this.queryParams = {
        ...this.queryParams,
        ...val,
      };

      protectionEffectiveness(this.queryParams.searchType).then((res) => {
        this.superObj = res;
        if(this.superObj.typeList.length>10){
          this.superObj.typeList=res.typeList.slice(0,10)
        }
      });
      // 高风险
      highRiskAsset(this.queryParams).then((res) => {
        this.highRiskArr = res;
      });
      // 重点关注事项
      itemThings(this.queryParams).then((res) => {
        this.thingArr = res;
      });
    },
    // 高风险资产打开
    openRiskDia(data) {
      this.operateOpen = false;
      if (
        data.assetType == "assets_host" ||
        data.assetType == "assets_server"
      ) {
        this.operateOpen = true;
      }
      this.getInfo(data);
      this.refreshRiskData({ assetsType: data.assetType }).then((res) => {
        this.assetsFormObj.searchData.assetType = data.assetType;
        this.$refs.riskDialogRef.open = true;
      });
    },
    // 获取展示表格
    getInfo(val) {
      let newQuery = {
        ...this.queryParams,
        searchType: this.$store.state.searchType || "1",
        assetsType: val.assetType,
      };

      getAssetsHightCount(newQuery).then((res) => {
        this.safeConcernsoTalInfo = res.typeList.map((item) => {
          return {
            name: item.name + "（台）",
            value: item.num,
          };
        });
        this.safeConcernsoTalInfo.unshift({
          name: res.all.name + "（台）",
          value: res.all.num,
        });
      });
    },
    refreshRiskData(query) {
      let newQuery = {
        ...this.queryParams,
        ...query,
        searchType: this.$store.state.searchType || "1",
      };
      return new Promise((resolve, reject) => {
        getAssetsPageListHight(newQuery).then((res) => {
          this.riskTotal = res.total;
          this.riskTableData = res.list;
          this.$refs.riskDialogRef.showConditon = false;
          resolve(this.riskTableData);
        });
      });
    },
    // 重点关注事项点击事件
    openKeyDialog(data) {
      if (!data.count) return;
      // this.getInfo(data)
      this.code=data.code;
      this.refreshKeyData({ levelCode: data.code }).then((res) => {
        this.imgFormObj.searchData = {
          levelCode: data.code,
          time: undefined,
          levelCode: undefined,
          categoryCode: undefined,
          disposalStatus: undefined,
          searchType: this.$store.state.searchType || "1",
        };
        this.$refs.keyDialogRef.open = true;
      });
    },
    refreshKeyData(query) {
      let newQuery = {
        ...this.queryParams,
        ...query,
        levelCode:query.levelCode?query.levelCode:this.code,
        searchType: this.$store.state.searchType || "1",
      };

      return new Promise((resolve, reject) => {
        kpilList(newQuery).then((res) => {
          this.keyTotal = res.total;
          this.keyTableData = res.list;
          resolve(this.keyTableData);
        });
      });
    },
    // 高风险资产循环展示
    riskLoop() {
      this.timer = setInterval(() => {
        let max = this.highRiskArr.length / 4 - 1;
        this.riskIndex = this.riskIndex >= max ? 0 : this.riskIndex + 1;
      }, 5000);
    },
    // 高风险资产列表
    getRiskTableList(val) {
      this.refreshRiskData(val);
    },
    operateRiskEvent(data) {
      window.open(window.urlPrefix + "dispose/entityPortrait/" + data.row.id);
    },
    // 重点关注获取列表
    getTableList(val) {
      if (val.time) {
        val.startTime = val.time[0];
        val.endTime = val.time[1];
      }
      this.refreshKeyData(val);
    },
    // 重点关注操作

    operateEvent(data) {
      window.open(
        window.urlPrefix + "dispose/incidentHandle/detail?showBack=false&ids=" + data.row.id
      );
    },
    mouseOver() {
      clearInterval(this.timer);
    },
    mouseLeave() {
      this.riskLoop();
    },
  },
  mounted() {
    this.riskLoop();
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  watch: {
    "$store.state.time":{
      handler(val) {
        if(val && val[0]){
          let time=null
          if(this.$store.state.searchType!='custom'){
            time=null
          }else{
            time=this.$store.state.time
          }
        this.queryParams.searchType=this.$store.state.searchType!='custom'?this.$store.state.searchType:null
        this.getDatas({
          searchType:this.$store.state.searchType!='custom'?this.$store.state.searchType:null,
          time
        });
        }
      },
      immediate: true,
      deep: true,
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 90%;
}
.module-top {
  height: 37% !important;
}
.module-middle {
  height: 32% !important;
}
.module-bottom {
  height: 29% !important;
  padding: 1.25rem;
}
::v-deep {
  .cycle {
    flex: 1;
    overflow: hidden;
  }
  .el-icon-arrow-left,
  .el-icon-arrow-right {
    background: rgba(59, 139, 255, 0.2);
    border: 1px solid rgba(59, 139, 255, 0.6);
    border-radius: 2px;

    padding: 1px 3px;
    &:before {
      font-size: 12px;
    }
  }
}
</style>
